<template>
  <div>
    <div sytle="margin: 10px 0">
      <el-input
        v-model="search"
        placeholder="请输入你需要的书籍"
        style="width: 20%;margin-bottom: 10px;"
      ></el-input>
      <el-button type="primary" sytle="margin-left: 30px" @click="searchBook()"
        >查询</el-button
      >
      <el-button type="primary" @click="show('新增', '', '', '', '0', '')"
        >新增</el-button
      >
      <el-button type="primary" @click="getBook()">刷新</el-button>
    </div>
    <div
      style="width:100%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
"
    >
      <el-table :data="tableData" border stripe height="730">
        <el-table-column prop="bookid" label="书籍编号" sortable>
        </el-table-column>
        <el-table-column prop="bookname" label="书名"> </el-table-column>
        <el-table-column prop="author" label="作者"> </el-table-column>
        <el-table-column prop="lendnum" label="借出量"> </el-table-column>
        <el-table-column prop="surplus" label="剩余量"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              round
              icon="el-icon-edit"
              @click="
                show(
                  '修改',
                  scope.row.bookid,
                  scope.row.bookname,
                  scope.row.author,
                  scope.row.lendnum,
                  scope.row.surplus
                )
              "
              >修改</el-button
            >
            <el-button
              size="mini"
              type="primary"
              round
              icon="el-icon-s-management"
              @click="borrowdialog(scope.row.bookid)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="danger"
              round
              icon="el-icon-remove-outline"
              @click="deleteBook(scope.row.bookid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-dialog
        :title="dialogCategory"
        :visible.sync="dialogVisible"
        @close="resetForm()"
      >
        <el-form :model="selectBook">
          <el-form-item label="书籍编号" :label-width="forLabelWidth">
            <el-input
              v-model="selectBook.bookid"
              placeholder="输入书籍编号"
              :disabled="flag"
            ></el-input>
          </el-form-item>
          <el-form-item label="书名" :label-width="forLabelWidth">
            <el-input
              v-model="selectBook.bookname"
              placeholder="输入书名"
              :disabled="flag"
            ></el-input>
          </el-form-item>

          <el-form-item label="作者" :label-width="forLabelWidth">
            <el-input
              v-model="selectBook.author"
              placeholder="输入作者"
              :disabled="flag"
            ></el-input>
          </el-form-item>

          <el-form-item label="借出量" :label-width="forLabelWidth">
            <el-input v-model="selectBook.lendnum" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="新增数量" :label-width="forLabelWidth">
            <el-input
              v-model="selectBook.surplus"
              placeholder="输入新增数量"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer"></div>
        <el-button @click="dialogVisible = false" style="margin-left:40% ;"
          >取消</el-button
        >
        <el-button type="primary" @click="Ok()">确定</el-button>
      </el-dialog>
    </div>

    <div>
      <el-dialog :visible.sync="borrowVisible" style="height:990px">
        <el-table
          :data="borrowTable"
          border
          stripe
          width="100%"
          max-height="700"
        >
          <el-table-column prop="id" label="借阅记录编号" sortable>
          </el-table-column>
          <el-table-column prop="bookid" label="书籍编号"> </el-table-column>
          <el-table-column prop="bookname" label="书籍名称"> </el-table-column>
          <el-table-column prop="userid" label="用户编号"> </el-table-column>
          <el-table-column prop="username" label="用户名称"> </el-table-column>
          <el-table-column prop="lendtime" label="借阅时间" width="150px">
          </el-table-column>
          <el-table-column prop="returntime" label="归还时间" width="150px">
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
export default {
  methods: {
    deleteBook (bookid) {
      this.$confirm('确定要删除编号为' + bookid + '书籍', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log('删除书籍')
          this.$ajax({
            method: 'delete',
            url: '/book/book',
            params: { bookid: bookid }
          })
            .then(res => {
              if (res.data === true) {
                this.$message({ type: 'success', message: '成功删除' })
                this.getBook()
              }
            })
            .catch(function (error) {
              console.log(error)
            })
        })
        .catch(() => {
          this.$message({ type: 'info', message: '取消删除' })
        })
    },
    borrowdialog (bookid) {
      console.log(bookid)
      this.borrowVisible = true
      this.$ajax({
        methods: 'get',
        url: '/borrow/findbybook',
        params: { bookid: bookid }
      })
        .then(res => {
          console.log(res.data)
          this.borrowTable = res.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    searchBook () {
      console.log(this.search)
      this.$ajax({
        method: 'get',
        url: '/book/book',
        params: { bookName: this.search }
      })
        .then(res => {
          console.log(res.data)
          this.tableData = res.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    //   清除输入框内存
    resetForm () {
      this.selectBook.bookid = ''
      this.selectBook.bookname = ''
      this.selectBook.author = ''
      this.selectBook.surplus = ''
    },
    getBook () {
      this.$ajax('/book/bookAll')
        .then(res => {
          this.tableData = res.data
          console.log(res.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    Ok () {
      this.dialogVisible = false
      // eslint-disable-next-line eqeqeq
      if (this.dialogCategory == '新增') {
        this.addBook()
      } else {
        this.modifyBook()
      }
    },
    show (dialogCategory, bookid, bookname, author, lendnum, surplus) {
      if (dialogCategory === '修改') {
        this.flag = true
      }
      if (dialogCategory === '新增') {
        this.flag = false
      }
      this.dialogCategory = dialogCategory
      this.selectBook.bookid = bookid
      this.selectBook.bookname = bookname
      this.selectBook.author = author
      this.selectBook.lendnum = lendnum
      this.selectBook.surplus = surplus
      this.dialogVisible = true
      console.log(this.dialogCategory)
    },
    addBook () {
      if (
        this.selectBook.bookid === '' ||
        this.selectBook.bookname === '' ||
        this.selectBook.author === '' ||
        this.selectBook.surplus === ''
      ) {
        this.$alert('请完善录入书籍信息', '增添失败', {
          confirmButtonText: '确定'
        })
      } else {
        console.log(this.selectBook)
        this.$ajax({
          method: 'post',
          url: '/book/book',
          data: this.selectBook
        })
          .then(res => {
            console.log(res.data)
            if (res.data === true) {
              this.$message({ type: 'success', message: '新增书籍成功' })
              this.getBook()
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    modifyBook () {
      this.$ajax({
        method: 'put',
        url: '/book/book',
        data: this.selectBook
      })
        .then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.data == true) {
            this.$message({ type: 'success', message: '修改书籍成功' })
            this.getBook()
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  data () {
    return {
      borrowTable: [],
      borrowVisible: false,
      tableData: [],
      search: '',
      dialogVisible: false,
      dialogCategory: '',
      selectBook: {
        bookid: '',
        bookname: '',
        author: '',
        lendnum: '0',
        surplus: ''
      },
      flag: false,
      forLabelWidth: '100px'
    }
  },
  created () {
    this.getBook()
  }
}
</script>
